// Utilities
import {defineStore} from 'pinia'
import {useDisplay} from "vuetify";

export const useAppStore = defineStore('app', {
  state: (): AppConfig => {
    return {
      order: 0, //值只允许0和-1，用于控制左侧抽屉是否占据整个屏幕高度，如果为0，则会位于app-bar下层
      rail: false,//抽屉失去焦点时是否收缩，只展示菜单第一个元素
      drawer: true,//初始状态是否显示整个菜单
      bottom: true,//手机模式时，左侧菜单是否显示在底部
      temporary: false,//是否临时展示抽屉，抽屉展开时不会占据main部分空间，移动端抽屉设置在左侧时只能为true
    }
  },
  actions: {
    toggleDrawer() {
      this.drawer = !this.drawer
    },
  },
  getters: {
    drawerLocation(state): 'bottom' | undefined {
      const display = useDisplay();
      return display.mobile.value ? (state.bottom ? 'bottom' : undefined) : undefined
    },
    permanent(state) {
      //是否永久展示左侧抽屉，为true时展开菜单会挤压右侧main部分空间，移动端并且抽屉在左侧时只能为false
      const display = useDisplay();
      if (display.mobile.value) {
        if (this.drawerLocation === undefined) {
          return false;
        } else {
          return !state.temporary;
        }
      } else {
        return !state.temporary
      }
    },
  }
})

